import {useEffect,useState,useMemo,If} from "react"
import { queryPosition,savePosition,updatePosition,removePosition } from "../../../../utils/request/api"
import { Table,Modal,Form,Input,Button,Popconfirm } from "antd"
export default ()=>{
    useEffect(()=>{
       getPostion(1,2)
    },[])
    let [posList,setPosList]=useState([])
    let [total,setTotal]=useState(0)
    let [openMoal,setOpenMoal]=useState(false)
    let [cutId,setCutId]=useState(-1)
    let [form]=Form.useForm()
    const getPostion=(pageNum,pageSize)=>{// 获取职位信息
        queryPosition({pageNum,pageSize})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                setPosList(res.data)
                setTotal(res.pages.total)
            }
        })
    }
    const addBtn=()=>{// 添加按钮
         setOpenMoal(true)
    }
    const sureAddPos=()=>{// 确认添加
        let params=form.getFieldsValue()
        savePosition(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                getPostion(1,2)
                setOpenMoal(false)
            }
        })
    }
    const saveBtn=(item)=>{// 修改
       setCutId(item.id)
    }
    const changePos=(item,key,e)=>{
          item[key]=e.target.value
          setPosList([...posList])
    }
    const sureSave=item=>{// 确认修改
        console.log(item);
        let {positionName,describe,id}=item
        let params={positionName,describe,id}
        updatePosition(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                getPostion(1,2)
                setCutId(-1)
            }
        })

    }
    const sureDel=(id)=>{// 删除职位
        removePosition({id})
        .then(res=>{
            if(res.meta.code==200){
                getPostion(1,2)
            }
        })
    }
    const renderPos=useMemo(()=>{// 渲染
        
            
               
        const props={
            columns:[
                {
                    title:"职位",
                    // dataIndex:"positionName",
                    key:"positionName",
                    render:item=><>
                       <If isShow={item.id!=cutId}>
                          {item.positionName}
                       </If>
                       <If isShow={item.id==cutId}>
                          <Input onChange={(e)=>changePos(item,"positionName",e)} value={item.positionName} />
                       </If>
                    </>
                },
                {
                    title:"描述",
                    // dataIndex:"describe",
                    key:"describe",
                    render:item=><>
                       <If isShow={item.id!=cutId}>
                          {item.describe}
                       </If>
                       <If isShow={item.id==cutId}>
                          <Input onChange={(e)=>changePos(item,"describe",e)} value={item.describe} />
                       </If>
                    </>
                },
                {
                    title:<Button onClick={addBtn} type="primary" size="small">添加</Button>,
                    render:item=><>
                     <If isShow={item.id!=cutId}>
                        <Button onClick={()=>saveBtn(item)} type="primary" size="small">修改</Button>
                        &nbsp;
                        &nbsp;
                        <Popconfirm
                        title="确认删除此职位吗"
                        onConfirm={()=>sureDel(item.id)} 
                        okText="确认"
                        cancelText="取消"
                        >
                           <Button type="danger" size="small">删除</Button>
                        </Popconfirm>
                     </If>
                     <If isShow={item.id==cutId}>
                        <Button onClick={()=>sureSave(item)} type="primary" size="small">确认</Button>
                        &nbsp;
                        &nbsp;
                        <Button onClick={()=>{
                            setCutId(-1)
                        }} type="" size="small">取消</Button>
                     </If>
                    </>
                },
            
            ],
            dataSource:posList,
            
            pagination:{
                total,
                pageSize:2,
                onChange:(page)=>{
                    // console.log(page);
                    getPostion(page,2)
                }
            }
        }
         return <Table  bordered {...props} />
    },[posList,cutId])
    return <>
         {renderPos}
         <Modal
           title="添加职位"
           open={openMoal}
            okText="确认"
            cancelText="取消"
           onCancel={()=>{
              setOpenMoal(false)
           }}
           onOk={sureAddPos}
         >
           <Form
            name="basic"
            form={form}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 20,
            }}
           
            autoComplete="off"
            >
            <Form.Item
                label="职位"
                name="positionName"
                rules={[
                {
                    required: true,
                    message: '请输入职位!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="描述"
                name="describe"
                rules={[
                {
                    required: true,
                    message: '请输入描述!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            

           
            </Form>
         </Modal>
    </>
}